<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>选择</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css?v=2" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<script src="js/config.js"></script>
	<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="js/vue/vue-router.js"></script>
	<style>
		body{
				-moz-user-select:none;/*火狐*/
				-webkit-user-select:none;/*webkit浏览器*/
				-ms-user-select:none;/*IE10*/
				-khtml-user-select:none;/*早期浏览器*/
				user-select:none;
		}
</style>
</head>

<body class="bodybg">
	<div id="app" v-cloak>
		<template v-if="tree">
			<div class="category-content d-f">
				<div class="category-keshi">
					<ul>
						<li v-for="item in tree" :class="{on:cid==item.id}" @click="cid=item.id">
							{{ item.name }}
						</li>
					</ul>
				</div>
				<div class="keshi-cells" v-if="cid">
					<template v-for="item in tree[idIndex[cid]].sub">
						<span class="keshi-cell-list" :class="{on:sid==item.id}" @click="sid=item.id">
							{{ item.name }}
						</span>
					</template>
				</div>
			</div>
			<div class="zhuanti-foot">
				<button class="zhuanti-foot-btn" @click="go">确认</button>
			</div>
		</template>
	</div>
	<script>
		let router = new VueRouter({
			mode: 'history'
		});
		var app = new Vue({
			el: "#app",
			router,
			data() {
				return {
					tree: null,
					cid: null,
					sid: null,
					idIndex: {}
				}
			},
			created() {
				axios.get('/mp/category/tree').then(res => {
					this.tree = res.data;
					this.cid = this.$route.query.id || this.tree[0].id;
					for (const i in this.tree) {
						this.idIndex[this.tree[i].id] = i;
					}
				});
			},
			methods: {
				go() {
					if (this.sid) {
						window.location.href = '/fenleishipin.html?id=' + this.sid;
					}
				}
			}
		})
	</script>
</body>

</html>